<template>
  <div class="toast-bg">
    <div class="mask"></div>
    <div class="toast"
      :style="theStyle">
      <div class="toast-head">
        <span>{{title}}</span>
        <div class="close-box">
          <i v-if="isFull"
            class="el-icon-copy-document"
            @click="closeFull"></i>
          <i v-else
            class="el-icon-full-screen"
            @click="toFull"></i>
          &nbsp;<i @click="onClickClose"
            class="el-icon-close"></i>
        </div>
      </div>
      <div class="toast-cont">
        <iframepage :url="ifrUrl"
          :from="from"></iframepage>
      </div>
    </div>

  </div>
</template>

<script>
  import iframepage from './iframepage.vue';
  const wD = '90%';
  // const hD = '700px';
  const hD = '90%';

  export default {
    name: 'iframeToast',
    components: { iframepage },
    // 定义pros接受的参数
    props: {
      msg: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        ifrUrl: '',
        theStyle: {},
        title: '标题',
        isFull: false,
        theStyleBak: {},
        from: 'bus'
      };
    },
    mounted() {
      console.log(12345, this.props);
      let { height, url, width, title, from } = this.msg;
      this.ifrUrl = url;
      this.theStyle = {
        width: this.setWH(width, wD),
        height: this.setWH(height, hD)
      };
      this.theStyleBak = { ...this.theStyle };
      if (title) {
        this.title = title;
      }
      if (from) {
        this.from = from;
      }
    },
    methods: {
      setWH(str, deft) {
        let newW = '';
        let bool1 = this.checkNum(str);
        let bool2 = this.checkPercent(str);
        if (bool1) {
          newW = str + 'px';
        } else if (bool2) {
          newW = str;
        } else {
          newW = deft;
        }
        return newW;
      },
      checkPercent(str) {
        return /^\d+(\.\d+)?%$/.test(str);
      },
      checkNum(str) {
        return !isNaN(parseFloat(str)) && isFinite(str);
      },
      toFull() {
        this.isFull = true;
        this.theStyle = {
          width: '100%',
          height: '100%',
          top: 0
        };
      },
      closeFull() {
        this.isFull = false;
        this.theStyle = { ...this.theStyleBak };
      },
      doclose() {
        // 把close事件传给toast.js
        this.$emit('close');
        // 之后销毁组件
        this.$nextTick(() => {
          this.$el.remove();
          this.$destroy();
        });
      },
      onClickClose() {
        this.doclose();
      }
    }
  };
</script>

<style scoped lang="scss">
  .toast-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    .toast {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #fff;
      // box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
      z-index: 5;
      .toast-head {
        position: relative;
        width: 100%;
        height: 40px;
        line-height: 40px;
        // background-color: #99f;
        // background-color: #66b1ff;
        background-color: #f5f7fa;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        // color: #fff;
      }
      .close-box {
        position: absolute;
        top: 0px;
        right: 10px;
        cursor: pointer;
      }
      .toast-cont {
        height: calc(100% - 40px);
        overflow: auto;
        padding: 5px;
        box-sizing: border-box;
      }
    }
  }
</style>